<template>
  <div id="app">
    <!-- 顶部导航栏 - 非登录页和注册页显示 -->
    <el-header v-if="showHeader">
      <div class="header-container">
        <!-- 酒店Logo -->
        <div class="logo">
          <router-link to="/home">
            <el-image 
              :src="require('@/assets/images/other/logo.png')" 
              alt="酒店Logo" 
              fit="contain"
              class="logo-img"
            ></el-image>
          </router-link>
        </div>

        <!-- 主导航菜单 -->
        <el-menu 
          mode="horizontal" 
          background-color="#1f2d3d" 
          text-color="#fff" 
          active-text-color="#ffd04b"
          class="main-menu"
        >
          <el-menu-item index="/home">
            <router-link to="/home">首页</router-link>
          </el-menu-item>
          <el-menu-item index="/rooms">
            <router-link to="/rooms">房间</router-link>
          </el-menu-item>
          <el-menu-item index="/dishes">
            <router-link to="/dishes">餐饮</router-link>
          </el-menu-item>
          <el-menu-item index="/seats">
            <router-link to="/seats">座位</router-link>
          </el-menu-item>
          <el-menu-item index="/about">
            <router-link to="/about">关于我们</router-link>
          </el-menu-item>
          <el-menu-item index="/Contact">
            <router-link to="/Contact">联系我们</router-link>
          </el-menu-item>
          <el-menu-item index="/admin" v-if="isAdminUser">
            <router-link to="/admin">后台管理</router-link>
          </el-menu-item>
        </el-menu>

        <!-- 用户操作区 -->
        <div class="user-actions">
          <el-button 
            type="text" 
            @click="$router.push('/FoodCart')" 
            class="cart-btn"
          >
            <el-icon><shopping-cart /></el-icon>
            购物车
            <span  class="cart-count">
              {{ cartItemCount }}
            </span>
          </el-button>
          
          <template v-if="isLogin">
            <el-button 
              type="text" 
              @click="$router.push('/member')"
            >
              <el-icon><user /></el-icon>
              会员中心
            </el-button>
            <el-button 
              type="warning" 
              @click="handleLogout"
            >
              退出登录
            </el-button>
          </template>
          
          <template v-else>
            <el-button 
              type="primary" 
              @click="$router.push('/login')"
              class="login-btn"
            >
              登录
            </el-button>
            <el-button 
              type="success" 
              @click="$router.push('/register')"
            >
              注册
            </el-button>
          </template>
        </div>
      </div>
    </el-header>

    <!-- 主要内容区 -->
    <el-main class="main-content">
      <router-view />
    </el-main>

   
  </div>
</template>

<script>
import { getToken ,removeToken, getAdmin, removeUserId } from '@/utils/auth.js';

export default {
  name: 'App',
  data() {
    return {
      // 控制导航栏和页脚是否显示
      showHeader: true,
      // 用户登录状态（实际项目中可从Vuex或localStorage获取）
      isLogin: false
    };
  },computed: {
    // 计算属性：判断是否为管理员用户
    isAdminUser() {
      return this.isLogin && getAdmin() === 'true';
    },
    // 新增：计算购物车商品数量
    cartItemCount() {
      return this.$store.state.cart.cartItemCount;
    }
  },
  watch: {
    // 监听路由变化，控制导航栏显示
    $route(to) {
      // 登录页和注册页不显示导航栏和页脚
      this.showHeader = !['/login', '/register'].includes(to.path);
      
      // 同步登录状态（实际项目中建议从全局状态获取）
      //this.isLogin = localStorage.getItem('token') ? true : false;
      this.isLogin = getToken() ? true : false;
    }
  },
  methods: {
    // 退出登录处理
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(() => {
        removeToken();
        removeUserId();
        this.isLogin = false;
        this.$router.push('/login');
        this.$message.success('退出登录成功');
      }).catch((err) => {
        this.$message.info('已取消退出');
        console.log("取消退出"+err)
      });
    }
  },
  mounted() {
     this.$store.dispatch('cart/initCartCount'); // 初始化数量
    // 初始化页面时检查路由状态
    this.showHeader = !['/login', '/register'].includes(this.$route.path);
    this.isLogin = !!getToken();
  }
};
</script>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.el-header {
  padding: 0;
  background-color: #1f2d3d;
  height: auto !important;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.logo {
  flex: 0 0 180px;
}

.logo-img {
  width: 100%;
  height: 50px;
  filter: alpha(opacity=70); /* 兼容IE浏览器 */
}

.main-menu {
  flex: 1;
  margin-left: 40px;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
}

.cart-btn .el-icon {
  margin-right: 5px;
}

/* 主要内容区样式 */
.el-main {
  flex: 1;
  padding: 20px;
  background-color: #f5f7fa;
}

/* 页脚样式 */
.el-footer {
  background-color: #1f2d3d;
  color: #fff;
  padding: 30px 0;
}

.footer-content {
  width: 90%;
  margin: 0 auto;
}

.footer-links h3 {
  color: #ffd04b;
  margin-bottom: 15px;
  font-size: 16px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #e0e0e0;
  text-decoration: none;
}

.footer-links a:hover {
  color: #ffd04b;
}

.copyright {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #38485c;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    padding: 10px;
  }

  .main-menu {
    width: 100%;
    margin-left: 0;
    margin-top: 10px;
  }

  .user-actions {
    margin-top: 10px;
  }

  .cart-count {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  background-color: #f56c6c;
  color: white;
  font-size: 12px;
  margin-left: 5px;
  vertical-align: top;
}
}
</style>